<template>
    <div class="xgspinwrap" style="width:900px">
        <h3>请输入您要浏览的店铺ID:</h3>
        <el-input
            placeholder="请输入店铺ID"
            v-model="input10"
            clearable class="sousuodp" style="width:400px;" @keyup.enter.native="cha">
        </el-input>
        <div v-if="pl">
        <div>
            <h3 class="hs">以下是商铺的商品</h3>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                border
                >
                <el-table-column
                fixed
                prop="SID"
                label="SID"
                width="150">
                </el-table-column>
                <el-table-column
                prop="zongtag"
                label="主页导航"
                width="120">
                </el-table-column>
                <el-table-column
                prop="miaoshutag"
                label="描述信息"
                width="250">
                </el-table-column>
                <el-table-column
                prop="kexuan"
                label="尺码信息"
                width="120">
                </el-table-column>
                <el-table-column
                prop="bixuan"
                label="颜色信息"
                width="100">
                </el-table-column>
                <el-table-column
                prop="img"
                label="图片"
                width="250">
                </el-table-column>
                <el-table-column
               prop="money"
                label="单价"
                width="100">
                </el-table-column>
                <el-table-column
                prop="stock"
                label="库存"
                width="100">
                </el-table-column>
               <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click="bianji(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :page-size="pagesize" @current-change="currentchange" :current-page.sync="currentPage" layout="prev, pager, next" :total="tableData.length"></el-pagination>
        </div>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- <el-form-item label="商铺ID" prop="name">
              <el-input v-model="ruleForm.name" style="width:400px"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="商品ID" prop="region">
              <el-input v-model="ruleForm.region" style="width:400px"></el-input>
            </el-form-item> -->
            <div :class="{yc:pls}">
            <h2 class="tishih">修改主页导航tag辅助主页分类搜索</h2>
            <el-form-item label="导航Tag" prop="type1">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox :label="item" name="type" v-for="(item,key) in arr" :key="key" ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <h2 class="tishih">修改描述性标签以供搜索</h2>
            <el-form-item label="描述分类" prop="type3">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags3"
                closable
                :disable-transitions="false"
                @close="handleClose3(tag)"
              >{{tag}}</el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible3"
                v-model="inputValue3"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm3"
                @blur="handleInputConfirm3"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput3">+ New Tag</el-button>
            </el-form-item>
            <h2 class="tishih">修改可选标签，例:尺码(规格)</h2>
                <el-form-item label="可选分类1" prop="type">
                    <el-tag
                        :key="tag"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose1(tag)"
                    >{{tag}}</el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    ></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </el-form-item>
                <div class="asd">
                    库存：&nbsp;
                     <el-input
                        placeholder="请输入库存"
                        v-model="ruleForm.kc"
                        clearable class="sousuodp" style="width:200px;">
                    </el-input>
                </div>
                <div class="asd">
                    单价：&nbsp;
                     <el-input
                        placeholder="请输入单价"
                        v-model="ruleForm.money"
                        clearable class="sousuodp" style="width:200px;">
                    </el-input>
                </div>
            <!-- <div class="kexuanbiaoqian">
                <h2 class="tishih">添加必选标签并上传对应图片以及数量</h2>
                <el-form-item label="可选分类1" prop="type">
                    <el-tag
                        :key="tag"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose1(tag)"
                    >{{tag}}</el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    ></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </el-form-item>
                <div class="bixuan">
                        <h2 class="tishih">添加必选标签并上传对应图片</h2>
                    <el-form-item label="必选分类" prop="type2">
                        <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags2"
                            closable
                            :disable-transitions="false"
                            @close="handleClose2(tag)"
                        >{{tag}}</el-tag>
                        <el-input
                            class="input-new-tag"
                            v-if="inputVisible2"
                            v-model="inputValue2"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm2"
                            @blur="handleInputConfirm2"
                        ></el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ New Tag</el-button>
                    </el-form-item>
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="false"
                        list-type="picture">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <div class="shuliang">
                        <span v-for="(item,key) in dynamicTags2" :key="key">{{item}}:
                            <el-input
                                placeholder="请输入数量"
                                v-model="input10"
                                clearable class="sls">
                            </el-input> 件</span>
                    </div>
                </div>
            </div> -->
            
            <!-- <el-form-item label="商品信息" prop="desc" class="abc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">确定修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
            </div>
            </el-form>
        </div>
        </div>
        <div class="bucunzai" v-else>{{erro}}</div>
    </div>
</template>
<script>
export default {
     methods: {
         bianji(val){
             console.log(val)
             this.id=val.SID
             this.ruleForm.type=val.zongtag.split(',')
             this.dynamicTags3=val.miaoshutag.split(',')
            if(val.kexuan){
                this.dynamicTags=val.kexuan.split(',')
            }
            this.ruleForm.kc=val.stock
            this.ruleForm.money=val.money
             axios.post("/api/dianpuchadaohang",{id:val.spid}).then((data)=>{
                 if(data.data){
                     this.arr=data.data[0].navname.split(',')
                    //  console.log(this.resetForm.type)
                 }
             })
             if(this.arr.indexOf(this.ruleForm.type[0])>-1){
                 console.log(1)
             }
             this.pls=false
             
         },
         cha(){
             axios.post("/api/xgspincha",{id:this.input10}).then((data)=>{
                 if(data.data){
                     this.pl=true
                     this.tableData=data.data
                     console.log(this.tableData)
                 }else{
                      this.$toast({
                            message:"未查询到商铺,重新新查询",
                            duration:1500
                        })
                     this.pl=false
                 }
             })
         },
        currentchange(val){
            console.log(val)
            this.currentPage=val
        },
      handleClick(row) {
        axios.post("/api/schuspins",{id:row.SID,spid:this.input10}).then((data)=>{
            if(data.data){
                this.tableData=""
                this.pl=true
                this.tableData=data.data
            }else{
                
            }
        })
      },
       submitForm(formName) {
           var _this=this
           if(this.dynamicTags3.length==0 || this.dynamicTags.length==0){
                 _this.$toast({
                    message:"请完善数据",
                    duration:1500
                })
                return false
           }
             var ab = function (params) {
              let flag = true;
              for(var key in params){
                if(params[key] != '0' && !params[key]){
                  console.log('请完善数据!');
                  _this.$toast({
                message:"请完善数据",
                duration:1500
              })
                  return false; // 终止程序
                }
              }
            
              return flag;
            }
            ab(this.ruleForm)
            axios.post("/api/gengxinspin",{
                rul:this.ruleForm,
                ms:this.dynamicTags3,
                kexuan:this.dynamicTags,
                id:this.id
            }).then((data)=>{
                if(data.data){
                     _this.$toast({
                        message:"修改成功",
                        duration:1500
                    })
                    setTimeout(function(){
                        window.location.href="http://localhost:8080/#/houtai/"
                    },1500)
                }else{
                     _this.$toast({
                        message:"修改失败，请重新操作",
                        duration:1500
                    })
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
            this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
        },
         handleInputConfirm2() {
        let inputValue2 = this.inputValue2;
        if (inputValue2) {
            this.dynamicTags2.push(inputValue2);
        }
        console.log(this.dynamicTags2)
        this.inputVisible2 = false;
        this.inputValue2 = "";
        },
         handleInputConfirm3() {
        let inputValue3 = this.inputValue3;
        if (inputValue3) {
            this.dynamicTags3.push(inputValue3);
        }
        this.inputVisible3 = false;
        this.inputValue3 = "";
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        showInput2() {
            this.inputVisible2 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        showInput3() {
            this.inputVisible3 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleClose1(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        handleClose2(tag) {
            this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
        },
        handleClose3(tag) {
            this.dynamicTags3.splice(this.dynamicTags3.indexOf(tag), 1);
        },
        submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      ch(key){
          var _this=this
        //  let news=this.resetForm.type.match(/\this.arr./)
        // for(var i=0;i<_this.ruleForm.type.length;i++){
        //     if(_this.arr[key]==_this.ruleForm.type[i]){
        //         return true
        //     }else{
        //         return false
        //     }
        // }
      }
    },

    data(){
        return {
            id:"",
            arr:"",
            pls:true,
            pl:false,
            erro:"",
            arr:"",
            pagesize:5,
            currentPage:1,
            input10:'',
             tableData: [],
        fileList: [],
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
        dynamicTags2: [],
        inputVisible2: false,
        inputValue2: "",
        dynamicTags3: [],
        inputVisible3: false,
        inputValue3: "",
        ruleForm: {
          kc: '',
          money: '',
          type: [],
        },
        rules: {
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请输入商品ID', trigger: 'blur' }
          ],
          type: [
                { required: true, message: "添加可选标签，例：尺码(规格)", trigger: "change" }
           ],
          type2: [
                { required: true, message: "添加必选标签并上传对应图片，例：颜色", trigger: "change" }
           ],
           type3: [
                { required: true, message: "添加描述性标签，可供搜索", trigger: "change" }
           ],
           type1: [
            { type: 'array', required: true, message: '请至少选择一个标签，可在店铺主页导航分类以供搜索', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填商品详细信息', trigger: 'blur' }
          ]
        }
        }
    }
}
</script>
<style>
.asd{
    margin-bottom: 10px;
}
.yc{
    display: none;
}
    .hs{
        display: block;
        margin: 20px 0;
    }
    .tishih{
        font-size: 16px;
        font-weight: 400;
    }
    .el-pagination{
        text-align: center;
    }
</style>

